@extends('store::layout')
@section('content')
    <div class="row">
        <div class="col-xl-3 col-sm-6">
            <a class="card-box widget-chart-one gradient-success bx-shadow-lg d-block" href="{{route('Store_Order_waitSend')}}">
                <div class="float-left">
                    <div style="font-size: 65px;" class="text-white hcl hcl-gzrl"></div>
                </div>
                <div class="widget-chart-one-content text-right">
                    <p class="text-white mb-0 mt-2">待发货订单</p>
                    <h3 class="text-white" id="no-delivery">0</h3>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-sm-6">
            <a class="card-box widget-chart-one gradient-danger bx-shadow-lg d-block" href="{{route('Store_Order_waitConfirm')}}">
                <div class="float-left">
                    <div style="font-size: 65px;" class="text-white hcl hcl-bjyd"></div>
                </div>
                <div class="widget-chart-one-content text-right">
                    <p class="text-white mb-0 mt-2">待收货订单</p>
                    <h3 class="text-white" id="no-sign">0</h3>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-sm-6">
            <a class="card-box widget-chart-one gradient-info bx-shadow-lg d-block" href="{{route('Store_Order_all')}}">
                <div class="float-left">
                    <div style="font-size: 65px;" class="text-white hcl hcl-order"></div>
                </div>
                <div class="widget-chart-one-content text-right">
                    <p class="text-white mb-0 mt-2">日销售量</p>
                    <h3 class="text-white" id="week-sales">0</h3>
                </div>
            </a>
        </div>

        <div class="col-xl-3 col-sm-6">
            <a class="card-box widget-chart-one gradient-warning bx-shadow-lg d-block" href="{{route('Store_Order_all')}}">
                <div class="float-left">
                    <div style="font-size: 65px;" class="text-white hcl hcl-coin"></div>
                </div>
                <div class="widget-chart-one-content text-right">
                    <p class="text-white mb-0 mt-2">日销售额</p>
                    <h3 class="text-white" id="week-sale-money">0</h3>
                </div>
            </a>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box d-none" id="sales-box">
                <div class="dropdown float-right">
                    <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                        <i class="mdi mdi-dots-horizontal"></i>
                    </a>
                </div>
                <h4 class="header-title">日销量</h4>
                <p class="text-muted">{{$count_date['start']}}-{{$count_date['end']}}</p>
                <div id="sales-chart" style="width: 100%;height:400px;"></div>
            </div><!-- end card-box-->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box d-none" id="rank-box">
                <div class="dropdown float-right">
                    <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
                        <i class="mdi mdi-dots-horizontal"></i>
                    </a>
                </div>
                <h4 class="header-title">产品排行</h4>
                <div id="goods-rank" style="width: 100%;height:400px;"></div>
            </div><!-- end card-box-->
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{asset(config('store.theme.theme2').'/vendor/echarts.min.js')}}"></script>
    <script>
        collect();
        salesStats();
        goodsRank();
        function collect(){
            var no_delivery = 0,no_sign=0,week_sales=0,week_sale_money=0;
            var collectTime = setInterval(function () {
                no_delivery +=1;
                no_sign +=1;
                week_sales +=1;
                week_sale_money +=1;
                $("#no-delivery").text(no_delivery);
                $("#no-sign").text(no_sign);
                $("#week-sales").text(week_sales);
                $("#week-sale-money").text(week_sale_money);
            },10);
            setTimeout(function () {
                $.get('{{route("Store_collectInfo")}}',function (response) {
                    if(response.status){
                        clearInterval(collectTime);
                        no_delivery = response.data.no_delivery;
                        no_sign = response.data.no_sign;
                        week_sales = response.data.week_sales;
                        week_sale_money = response.data.week_sale_money;
                        $("#no-delivery").text(no_delivery);
                        $("#no-sign").text(no_sign);
                        $("#week-sales").text(week_sales);
                        $("#week-sale-money").text(week_sale_money);
                    }
                });
            },1000);

        }

        function salesStats(){
            $.get('{{route("Store_statisticalSales")}}',function (response) {
                if(response.status){
                    $("#sales-box").removeClass('d-none');
                    var myChart = echarts.init(document.getElementById('sales-chart'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: response.data.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: response.data.sales,
                            type: 'line'
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        }
        
        function goodsRank() {
            $.get('{{route("Store_goodsRankingList")}}',function (response) {
                if(response.status){
                    $("#rank-box").removeClass('d-none');
                    var myChart = echarts.init(document.getElementById('goods-rank'));
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: response.data.goods_names
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'销售量',
                            data: response.data.sales,
                            type: 'bar'
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        }


    </script>
@endpush